<cloud-title>Order your taco creations</cloud-title>

<p>You've crafted your mouthwatering taco masterpieces. Now, just imagine those
  creations appearing before you at home...or work...or wherever you are!</p>

<p *ngIf="(cartItems.length == 0)"><b>There are no tacos currently in your cart.
  <a [routerLink]="['../design']">Create one now</a> or choose a
  <a [routerLink]="['../recents']">recently created taco</a>.</b></p>

<div *ngIf="(cartItems.length > 0)">
<p>Here are your latest taco designs. Just say the
    word and we'll set them on a cloud aloft to you!</p>

    <div class="groupBox groupBoxFull">
      <div class="groupBoxTitle">Here are my tacos...</div>
      <div class="groupBoxContent">
        <table border="1" width="90%">
          <thead>
            <tr>
              <td>Qty</td>
              <td>Name</td>
              <td>Description</td>
              <td>Price</td>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let item of cartItems">
              <td>
                <select [(ngModel)]="item.quantity">
                  <option value="0">Remove</option>
                  <option value="1">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                  <option value="5">5</option>
                  <option value="6">6</option>
                  <option value="7">7</option>
                  <option value="8">8</option>
                  <option value="9">9</option>
                  <option value="10">10</option>
                </select>
              </td>
              <td>The "<span class="caps">{{item.taco.name}}</span>"</td>
              <td>
                <ul class="commalist">
                  <li *ngFor="let ingredient of item.taco.ingredients | nonwraps">{{ingredient.name}}</li>
                </ul>
                <span *ngIf="(item.taco.ingredients | wraps)?.length > 0">
                    <span>wrapped in</span>
                  <ul class="commalist">
                      <li *ngFor="let ingredient of item.taco.ingredients | wraps">{{ingredient.name}}</li>
                  </ul>
                </span>
                <span *ngIf="(item.taco.ingredients | wraps)?.length == 0">in a bowl</span>
                </td>
              <td align="right">{{4.99 * item.quantity | currency}}</td>
            </tr>
          </tbody>
          <tfoot>
            <tr>
              <td colspan="3" align="right">Total:</td>
              <td align="right"><span>{{cartTotal | currency}}</span></td>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>

    <form (ngSubmit)="onSubmit()">
      <div class="groupBox groupBoxHalf">
        <div class="groupBoxTitle">Deliver them to...</div>
        <div class="groupBoxContent">
          <label for="deliveryName">Name: </label>
          <input type="text" [(ngModel)]="model.deliveryName" name="deliveryName" size="40"/>
          <br/>

          <label for="deliveryStreet">Street address: </label>
          <input type="text" [(ngModel)]="model.deliveryStreet" name="deliveryStreet" size="40"/>
          <br/>

          <label for="deliveryCity">City / State: </label>
          <input type="text" [(ngModel)]="model.deliveryCity" name="deliveryCity" size="30"/>
          <select [(ngModel)]="model.deliveryState" name="deliveryState">
            <option value="">--</option>
            <option value="AL">AL</option>
            <option value="AK">AK</option>
            <option value="AR">AR</option>
            <option value="AZ">AZ</option>
            <option value="CA">CA</option>
            <option value="CO">CO</option>
            <option value="CT">CT</option>
            <option value="DE">DE</option>
            <option value="FL">FL</option>
            <option value="GA">GA</option>
            <option value="HI">HI</option>
            <option value="IA">IA</option>
            <option value="ID">ID</option>
            <option value="IL">IL</option>
            <option value="IN">IN</option>
            <option value="KS">KS</option>
            <option value="KY">KY</option>
            <option value="LA">LA</option>
            <option value="MA">MA</option>
            <option value="MD">MD</option>
            <option value="ME">ME</option>
            <option value="MI">MI</option>
            <option value="MN">MN</option>
            <option value="MO">MO</option>
            <option value="MS">MS</option>
            <option value="MT">MT</option>
            <option value="NC">NC</option>
            <option value="ND">ND</option>
            <option value="NE">NE</option>
            <option value="NH">NH</option>
            <option value="NJ">NJ</option>
            <option value="NM">NM</option>
            <option value="NV">NV</option>
            <option value="NY">NY</option>
            <option value="OH">OH</option>
            <option value="OK">OK</option>
            <option value="OR">OR</option>
            <option value="PA">PA</option>
            <option value="RI">RI</option>
            <option value="SC">SC</option>
            <option value="SD">SD</option>
            <option value="TN">TN</option>
            <option value="TX">TX</option>
            <option value="UT">UT</option>
            <option value="VA">VA</option>
            <option value="VT">VT</option>
            <option value="WA">WA</option>
            <option value="WI">WI</option>
            <option value="WV">WV</option>
            <option value="WY">WY</option>
          </select>
          <br/>

          <label for="deliveryZip">Zip code: </label>
          <input type="text" [(ngModel)]="model.deliveryZip" name="deliveryZip"/>
        </div>
      </div>

      <div class="groupBox groupBoxHalf">
        <div class="groupBoxTitle">Here's how I'll pay...</div>
        <div class="groupBoxContent">
          <label for="ccNumber">Credit Card #: </label>
          <input type="text" [(ngModel)]="model.ccNumber" name="ccNumber"/>
          <br/>

          <label for="ccExpiration">Expiration / CVV: </label>
          <input type="text" [(ngModel)]="model.ccExpiration" name="ccExpiration"/>
          <input type="text" [(ngModel)]="model.ccCVV" name="ccCVV" size="4"/>
        </div>
      </div>

      <br/>

      <big-button label="Submit Order"></big-button>
      <!-- <input type="submit" value="Submit order"/> -->
    </form>
</div>
